<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				background-color: #38a5ea;
			}
			
			.mui-table-view {
				background-color: #38a5ea;
			}
			
			.mui-table-view-cell {
				background-color: #38a5ea;
				color: #FFFFFF;
				line-height: 30px;
			}
			
			.mui-table-view-cell:after {
				background-color: rgba(255, 255, 255, 0.5);
				right: 15px;
			}
			
			.mui-table-view:after {
				background-color: rgba(255, 255, 255, 0.5);
				left: 15px;
				right: 15px;
			}
			
			.mui-table-view-cell img {
				height: 24px;
				line-height: 30px;
				padding-right: 16px;
				padding-left: 15px;
				vertical-align: middle;
			}
			
			.mui-table-view-cell span {
				/*height: 24px;
					line-height: 30px;*/
				padding-right: 16px;
				padding-left: 15px;
				vertical-align: middle;
			}
			
			#avatararea {
				padding: 20px;
				display: -webkit-box;
				vertical-align: middle;
			}
			
			#avatararea div {
				/*float: left;*/
			}
			
			.loginstatus {
				margin-left: 15px;
				margin-top: 6px;
			}
			
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				background-color: #51D1C2;
			}
			
			.logout {
				display: none;
			}
			#changepass{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="avatararea">
				<div class="avatar">
					<img src="../image/default_user_portrait.gif" style="height: 50px;border-radius: 50px;" id="avatar" />
				</div>

				<div class="loginstatus">
					<h3 style="margin: 0;font-weight: 300;color: #fff;">我的设置</h3>
					<p style="margin-top: 5px;color: #aed5f6;" id="loginstatus">未登录</p>
				</div>

			</div>
			<ul class="mui-table-view" id="left">
				<li class="mui-table-view-cell" id="myorders">
					<a href="orders.html"><img src="../image/menu/file.png" />我的购买</a>
				</li>
				<li class="mui-table-view-cell" id="mycenter">
					<a href="mycenter.html"> <img src="../image/menu/avr.png" />个人中心</a>
				</li>
				<li class="mui-table-view-cell" id="changepass">
					<a href="changepassword.html"> <img src="../image/menu/avr.png" />修改密码</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="favor.html"><img src="../image/menu/star.png" />我的收藏</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="history.html"><img src="../image/menu/book.png" />练习历史</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="wrong.html"><img src="../image/menu/circle.png" />我的错题</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="analytic.html"><img src="../image/menu/date.png" />数据统计</a>
				</li>
				<!--<li class="mui-table-view-cell">
				<a href=""><img src="../image/menu/arrow.png"/>初始化数据</a>
			</li>-->
				<li class="mui-table-view-cell">
					<a href="contact.html"><img src="../image/menu/hand.png" />联系我们</a>
				</li>
				<li class="mui-table-view-cell logout">
					<a id="logout"><img src="../image/menu/out.png" />退出</a>
				</li>
				<li class="mui-table-view-cell login">
					<a href="login.html" id="login"><span class="mui-icon mui-icon-download"></span>登录/注册</a>
				</li>
			</ul>
		</div>
		<script src="../script/api.js" type="text/javascript" charset="utf-8"></script>

		<script>
			function success(ret) {
				var logoutEle = document.getElementsByClassName("logout");
				var loginEle = document.getElementsByClassName("login");
				if (ret.code == "200") {
					if (ret.error) {
						api.toast({
							msg: ret.error,
							location: 'middle',
							duration: 1000
						});
						localStorage.removeItem('key');
						logoutEle[0].style.display = "none";
						loginEle[0].style.display = "block";
					} else if (ret.data) {
						document.getElementById("loginstatus").innerHTML = "ID:" + ret.data.nickname;
						logoutEle[0].style.display = "block";
						loginEle[0].style.display = "none";
						if (ret.data.mediumavatar != "") {
							var imgurlafter = ret.data.mediumavatar;
							imgurlafter = imgurlafter.replace("public:\/", "");
							var imgurl = MYAPP.webroot + "/files" + imgurlafter;
							document.getElementById("avatar").src = imgurl;
						}
						var push = api.require('push');
						push.bind({
							userName: ret.data.nickname,
							userId: ret.data.nickname
						}, function(ret, err) {
							//
						});
						localStorage.setItem('nickname', ret.data.nickname);
					} else {
						api.toast({
							msg: '未知错误请，请重试！',
							location: 'middle',
							duration: 1000
						});
					}
				}
			}

			function loginstatus() {
				var key = getUserKey();
				var data = {
					key: key
				}
				var url = MYAPP.webroot + "/api/index.php/Home/User/memberinfo/";
				api.ajax({
					url: url,
					method: 'post',
					timeout: 30,
					dataType: 'json',
					returnAll: false,
					data: {
						values: data
					}
				}, function(ret, err) {
					if (ret.code) {
						success(ret);
					} else {
						api.toast({
							msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
							location: 'middle',
							duration: 1000
						});
					}
				});
			}
			apiready = function() {
				loginstatus();
				api.addEventListener({
					name: 'keyback'
				}, function(ret, err) {
					api.closeWidget();
				});
				var main = $api.byId('main');
				main.style.width = (api.frameWidth - 48) + 'px';
				var header = $api.byId('header');
				$api.fixIos7Bar(header);
				//			document.getElementById("login").addEventListener('click', function() {
				//				login();
				//			});
				document.getElementById("logout").addEventListener("click", function() {
					localStorage.removeItem('key');
					api.sendEvent({
						name: 'logout'
					});
				});
				if (api.systemType == 'ios') {
					document.getElementById("myorders").style.display = "none";
					document.getElementById("mycenter").style.display = "none";
					document.getElementById("changepass").style.display="block";
				}
				mui('#left').on('tap', 'a', function() {
					var url = this.getAttribute('href');
					var id = this.getAttribute('id');
					if (getUserKey()) {
						if (url) {
							api.openWin({
								name: url,
								url: url,
								bgColor: '#fff'
							});
						} else if (id == "logout") {
							localStorage.removeItem('key');
							document.getElementById("loginstatus").innerHTML = "未登录";
							api.toast({
								msg: "已退出!"
							});
							var logoutEle = document.getElementsByClassName("logout");
							var loginEle = document.getElementsByClassName("login");
							logoutEle[0].style.display = "none";
							loginEle[0].style.display = "block";
						} else {
							api.toast({
								msg: "该功能稍后更新哦!"
							});
						}
					} else {
						//						alert(MYAPP.webroot);
						login();
					}
				});
				document.getElementById("avatararea").addEventListener('tap', function() {
					if (getUserKey()) {
						api.openWin({
							name: 'mycenter',
							url:'mycenter.html',
							bgColor: '#fff'
						});
					}else{
						login();
					}
					
				});
				api.addEventListener({
					name: 'loginsuccess'
				}, function(ret, err) {
					loginstatus();
				});
			};
		</script>
	</body>

</html>